<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./作业1样式.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
    <div class="box">
        <ul>
            <!-- <li>
                <img src="./images/day09_03.png">
                <p>新款316不锈钢智能温显咖啡保温杯女生高颜值办公室精品</p>
                <p class="p1"><span>￥</span>14.90</p>
            </li> -->
        </ul>
    </div>
</body>
</html>
<script>
    var data=[{
        'tp':'./48c012a708b03ea499acf6537eb4099c205091448.jpg@480w_264h_1s.avif',
        'js':'新款316不锈钢智能温显咖啡保温杯女生高颜值办公室精品',
        'jg':'14.9'
    },{
        'tp':'./images/day09_03.png',
        'js':'新款316不锈钢智能温显咖啡保温杯女生高颜值办公室精品',
        'jg':'14.9'
    },{
        'tp':'./images/day09_03.png',
        'js':'新款316不锈钢智能温显咖啡保温杯女生高颜值办公室精品',
        'jg':'14.9'
    },{
        'tp':'./images/day09_03.png',
        'js':'新款316不锈钢智能温显咖啡保温杯女生高颜值办公室精品',
        'jg':'14.9'
    },{
        'tp':'./images/day09_03.png',
        'js':'新款316不锈钢智能温显咖啡保温杯女生高颜值办公室精品',
        'jg':'14.9'
    },{
        'tp':'./images/day09_03.png',
        'js':'新款316不锈钢智能温显咖啡保温杯女生高颜值办公室精品',
        'jg':'14.9'
    },{
        'tp':'./images/day09_03.png',
        'js':'新款316不锈钢智能温显咖啡保温杯女生高颜值办公室精品',
        'jg':'14.9'
    },{
        'tp':'./images/day09_03.png',
        'js':'新款316不锈钢智能温显咖啡保温杯女生高颜值办公室精品',
        'jg':'14.9'
    },{
        'tp':'./images/day09_03.png',
        'js':'新款316不锈钢智能温显咖啡保温杯女生高颜值办公室精品',
        'jg':'14.9'
    },{
        'tp':'./images/day09_03.png',
        'js':'新款316不锈钢智能温显咖啡保温杯女生高颜值办公室精品',
        'jg':'14.9'
    },{
        'tp':'./images/day09_03.png',
        'js':'新款316不锈钢智能温显咖啡保温杯女生高颜值办公室精品',
        'jg':'14.9'
    },{
        'tp':'./images/day09_03.png',
        'js':'新款316不锈钢智能温显咖啡保温杯女生高颜值办公室精品',
        'jg':'14.9'
    },{
        'tp':'./images/day09_03.png',
        'js':'新款316不锈钢智能温显咖啡保温杯女生高颜值办公室精品',
        'jg':'14.9'
    },{
        'tp':'./images/day09_03.png',
        'js':'新款316不锈钢智能温显咖啡保温杯女生高颜值办公室精品',
        'jg':'14.9'
    },{
        'tp':'./images/day09_03.png',
        'js':'新款316不锈钢智能温显咖啡保温杯女生高颜值办公室精品',
        'jg':'14.9'
    },{
        'tp':'./images/day09_03.png',
        'js':'新款316不锈钢智能温显咖啡保温杯女生高颜值办公室精品',
        'jg':'14.9'
    },{
        'tp':'./images/day09_03.png',
        'js':'新款316不锈钢智能温显咖啡保温杯女生高颜值办公室精品',
        'jg':'14.9'
    },{
        'tp':'./images/day09_03.png',
        'js':'新款316不锈钢智能温显咖啡保温杯女生高颜值办公室精品',
        'jg':'14.9'
    }
    ]
    //获取
    var ul=document.querySelector('ul')
    //循环遍历数组
    for(i=0;i<data.length;i++){
        data.reverse 
        //创建
        var li=document.createElement('li')
        //赋值 超级字符串
        li.innerHTML=`
                <img src="${data[i].tp}">
                <p>${data[i].js}</p>
                <span class="iconfont icon-nianhuojie"></span><span class="iconfont icon-yili_anmuxi"></span>
                <p class="p1"><span>￥</span>${data[i].jg}</p>
        `;
        //添加
        ul.appendChild(li)
    }
</script>